<div
  #radio
  class="x-radio"
  [class.x-flex]="justify || align || direction"
  [class.x-disabled]="disabled"
  [class.x-required]="requiredIsEmpty"
  [class.x-invalid]="invalid"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <ng-container *ngIf="button || icon; else default">
    <x-buttons>
      <x-button
        *ngFor="let item of nodes; trackBy: trackByItem"
        [icon]="item.icon"
        [size]="size"
        [type]="type"
        [activated]="item.id === value"
        [disabled]="disabled || item.disabled"
        (click)="radioClick($event, item)"
        >{{ item.label }}</x-button
      >
    </x-buttons>
  </ng-container>
</div>

<ng-template #default>
  <div class="x-radio-row">
    <div
      class="x-radio-item"
      *ngFor="let item of nodes; trackBy: trackByItem"
      [class.x-checked]="item.id === value"
      [class.x-disabled]="item.disabled"
      (click)="radioClick($event, item)"
    >
      <span class="x-radio-box"></span>
      <span class="x-radio-label">{{ item.label }}</span>
    </div>
  </div>
</ng-template>
